<template>
  <view class="data-box">
    <view v-if="title" class="data-box-title">
      <text>{{ title }}</text>
    </view>
    <view class="data-box-body">
      <view v-for="(item, index) in data" :key="index" class="data-item">
        <view v-if="item.icon" class="data-box-icon-wrap">
          <!-- <view class="icon-box">
            <text v-html="item.icon" class="iconfont"></text>
          </view>-->
          <view class="icon-box">
            <image :src="item.icon" />
          </view>
        </view>
        <view class="data-info-wrap" @click="handleClick(item)">
          <view class="data-item__label">
            <text>{{ item.label }}</text>
          </view>
          <view class="data-item__value">
            <text>{{ item.value }}</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
      default() {
        return "";
      }
    },
    data: {
      type: Array,
      default() {
        return [];
      }
    }
  },
  data() {
    return {};
  },
  methods: {
    handleClick(item) {
      if (item.fun && typeof item.fun == "function") item.fun();
    }
  }
};
</script>

<style scoped lang="scss">
@import "@/static/iconfont/iconfont.css";
.data-box-title {
  color: #ffffff;
  font-size: 28rpx;
  margin-bottom: 20rpx;
  // padding-left: 30rpx;
  text-align: center;
}
.data-box-body {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;

  .data-item {
    width: 45%;
    margin-bottom: 35rpx;
    // padding-left: 60rpx;
    padding-left: 80rpx;
    box-sizing: border-box;
    display: flex;

    .data-box-icon-wrap {
      margin-right: 15rpx;
      .icon-box {
        image {
          height: 70%;
          width: 70%;
        }
        color: #ffffff;
        height: 36rpx;
        width: 36rpx;
        border-radius: 36rpx;
        background: rgba(164, 217, 228, 0.4);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 20rpx;
      }
    }
    .data-info-wrap {
      .data-item__label {
        font-size: $data-box-label-font-size;
        color: #eeeeee;
        font-weight: 100;
      }
      .data-item__value {
        margin-top: 5rpx;
        color: #ffffff;
        font-size: $data-box-value-font-size;
      }
    }
    // justify-content: center;
  }
}
</style>
